<template>
  <el-card>
    <el-row :gutter="24">
      <el-col :span="4">
        <el-tree default-expand-all :current-node-key="currentNodeKey" :data="deptTreeList" node-key="depttId"
                 :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"/>
      </el-col>
      <el-col :span="20" :offset="0">
        <el-row>
          <el-form :inline="true" :model="queryVo" size="default">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="queryVo.userName" placeholder="请输入用户名称" />
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
              <el-input v-model="queryVo.phonenumber" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryVo.state" placeholder="请选择状态">
                <el-option
                    v-for="item in stateOptions"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="ok" v-auth="'system-user-list'">查询</el-button>
              <el-button size="small" type="default" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item/>
          </el-form>
        </el-row>


        <el-row>
          <el-button size="small" type="success" @click="btnAdd" v-auth="'system-user-add'">
            <el-icon>
              <ele-FolderAdd/>
            </el-icon>
            添加
          </el-button>
          <el-button size="small" type="primary" :disabled="select.sign" @click="selectUpdateBtn" v-auth="'system-user-update'">
            <el-icon>
              <ele-EditPen/>
            </el-icon>
            修改
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="selectDelete">
            <template #reference>
              <el-button size="small" type="danger" :disabled="select.nodes.length<=0"  v-auth="'system-user-delete'">
                <el-icon>
                  <ele-Delete/>
                </el-icon>
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </el-row>
        <el-row class="mt10">
          <el-table :data="userList"
                    v-loading="loding"
                    @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="userId" label="用户编号" align="center"/>
            <el-table-column prop="userName" label="用户名" align="center"/>
            <el-table-column prop="nickName" label="用户昵称" align="center"/>
            <el-table-column prop="deptStr" label="部门" align="center"/>
            <el-table-column label="状态" align="center">
              <template #default="scope">
                <el-tag size="small"
                        v-for="(item,index) in stateOptions"
                        v-show="item.dictValue==scope.row.state"
                        :key="index"
                        :type="item.dictValue=='0'?'success':'warning'" v-text="item.dictLabel"></el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"/>
            <el-table-column align="center" label="操作" v-auths="['system-user-update', 'system-user-delete', 'system-user-respwd']">
              <template #default="scope">
                <el-link type="primary" title="修改" @click="signUpdateBtn(scope.row)"  v-auth="'system-user-update'">
                  <el-icon>
                    <ele-EditPen/>
                  </el-icon>
                </el-link>
                <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
                  <template #reference>
                    <el-link title="删除" type="danger" class="ml10" v-auth="'system-user-delete'">
                      <el-icon>
                        <ele-Delete/>
                      </el-icon>
                    </el-link>
                  </template>
                </el-popconfirm>

                <el-popconfirm title="确定重置密码吗？" @confirm="resetPassword(scope.row)">
                  <template #reference>

                <el-link class="ml10" title="重置密码" type="warning"  v-auth="'system-user-respwd'">
                  <el-icon>
                    <ele-Lollipop/>
                  </el-icon>
                </el-link>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              class="mt15"
              style="justify-content: flex-end;"
              v-model:currentPage="queryVo.current"
              v-model:page-size="queryVo.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              small
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="getList"
              @current-change="getList"
          />
        </el-row>
      </el-col>
    </el-row>
    <edit-form :state-options="stateOptions" :dept-tree="deptTreeList" ref="editRef" @ok="ok"></edit-form>
  </el-card>
</template>

<script setup>
import EditForm from './EditForm.vue'
import {treeList} from '/@/api/system/dept'
import { queryList, delUser,resetPwd} from "/@/api/system/user";
import {ElMessage} from "element-plus";


const {proxy} = getCurrentInstance()
const deptTreeList = ref([])
const currentNodeKey = ref(null)

const editRef = ref()
const userList = ref([])
const total = ref(0)
const loding = ref(true)
const queryVo = reactive({
  userName: undefined,
  deptId: undefined,
  phonenumber: undefined,
  state: undefined,
  current: 1,
  pageSize: 10
})

const getList = ()=>{
  loding.value = true
  queryList(queryVo).then(res => {
    const {pageTotal,rows} = res.data
    userList.value = rows
    total.value= pageTotal
    loding.value = false
  })
}

// 组织点击事件
const handleNodeClick = (node) => {
  queryVo.deptId=node.deptId
  ok()
}


const signUpdateBtn=(node)=>{
  editRef.value.open(node)
}
const deleteRows=(node)=>{
  const {userId} =node
  delUser(userId).then(res => {
    ElMessage.success(res.msg)
    ok()
  })
}
const resetPassword =(node)=>{
  const tempNode = JSON.parse(JSON.stringify(node))
  tempNode.createTime=null
  resetPwd(tempNode).then(res => {
    ElMessage.success(res.msg)
  })
}
const select = reactive({
  sign:true,
  nodes:[]
})
// 批量选择触发
const handleSelectionChange=(node)=>{
  select.nodes=node
  if(select.nodes.length==1){
    select.sign=false
  }else{
    select.sign=true
  }
}
const selectUpdateBtn = ()=>{
  editRef.value.open(select.nodes[0])
}
const btnAdd = ()=>{
  editRef.value.open()
}
const selectDelete = ()=>{
  let arr = []
  select.nodes.forEach(item=>{
    arr.push(item.userId)
  })
  delUser(arr).then(res => {
    ElMessage.success(res.msg)
    ok()
  })
}

//状态选项字典
const stateOptions = ref([])

onBeforeMount(() => {
  // 获取通用状态字典
  proxy.$dictOptions('sys_common_status').then(res => {
    stateOptions.value = res.data
  })
  // 获取部门树形菜单
  treeList().then(res => {
    const {data} = res
    deptTreeList.value = data
  })
  // 获取用户列表
  getList()

})
const ok =()=>{
  getList()
}
const resetQuery =()=>{
  queryVo.userName= undefined
  queryVo.deptId=undefined
  queryVo.phonenumber= undefined
  queryVo.state= undefined
  queryVo.current= 1
  queryVo.pageSize= 10
  ok()
}
const defaultProps = {
  children: 'children',
  label: 'deptName',
}
</script>

<style scoped>

</style>
